import React, { FC } from "react";
import classNames from "classnames/bind";
import style from "./index.module.scss";
import { Link } from "react-router-dom";
import { UserAddOutlined } from "@ant-design/icons";
import { Typography, Flex, Button, Form, Input, message, Spin } from "antd";
import { RegisterUserInfo } from "../../service";
import { useNavigate } from "react-router-dom";
import { useRequest } from "ahooks";
const CBN = classNames.bind(style);
const { Title } = Typography;

const Register: FC = () => {
  const nav = useNavigate();
  const { run, loading } = useRequest(
    async (values) => {
      const { nickname, username, password } = values;
      await RegisterUserInfo({ nickname, username, password });
    },
    {
      manual: true,
      onSuccess() {
        message.success("注册成功！");
        nav("/login");
      },
    },
  );
  //触发提交事件
  const onFinish = (values: any) => {
    run(values);
    console.log("Success:", values);
  };

  const Inouform = (
    <>
      <Spin spinning={loading}>
        <Form name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} onFinish={onFinish} autoComplete="off">
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              { required: true, message: "请输入用户名!" },
              { type: "string", min: 5, max: 20, message: "字符长度在20~5之间" },
              { pattern: /^\w+$/, message: "只能数字下划线" },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="密码" name="password" rules={[{ required: true, message: "请输入密码!" }]}>
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="确认密码"
            name="confirm"
            dependencies={["password"]} //依赖password
            rules={[
              { required: true, message: "请再次输入密码!" },
              ({ getFieldValue }) => {
                return {
                  validator(_, value) {
                    if (!value || getFieldValue("password") == value) {
                      return Promise.resolve();
                    } else {
                      return Promise.reject(new Error("两次密码不一致"));
                    }
                  },
                };
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item label="昵称" name="nickname" rules={[{ required: true, message: "请输入昵称!" }]}>
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Flex gap="middle" align="center" justify="center">
              <Button type="primary" htmlType="submit">
                注册
              </Button>
              <Link to="/login">已有账户,登录</Link>
            </Flex>
          </Form.Item>
        </Form>
      </Spin>
    </>
  );

  return (
    <div className={CBN("Register")}>
      <div className={CBN("box")}>
        <div className={CBN("head")}>
          <Flex gap="middle" align="center" justify="center">
            <Title level={3}>
              <UserAddOutlined />
            </Title>
            <Title level={3}>新用户注册</Title>
          </Flex>
        </div>
        <div className={CBN("container")}>{Inouform}</div>
      </div>
    </div>
  );
};
export default Register;
